<template>
  <div class="exchange-record">
    <div class="record-item" v-for="(item, index) in records" :key="index">
      <div class="header">
        <div class="left">
          <img src="@/assets/image/t1.png" alt="Touch Go" class="logo" />
          <!-- <img src="@/assets/image/t1.png" alt="Touch Go" class="logo"> -->
          <span class="brand">{{ item.payout_target_name }}</span>
        </div>
        <span class="date">{{
          dayjs(item.trade_time).format("DD/MM/YYYY")
        }}</span>
      </div>

      <div class="content">
        <div class="amount">
          {{ item.trade_currency }} {{ item.trade_amount }}
        </div>
        <div class="points">
          <img src="@/assets/image/c1.png" alt="coin" class="coin-icon" />
          <span>-{{ item.trade_asset_amount }}</span>
        </div>
      </div>

      <!-- <div class="footer" :class="`srtatus-${item.trade_status}`"> -->
      <div class="footer">
        <div class="flex">
          <p :class="['status-tag', `srtatus-${item.trade_status}`]">
            {{ trade_statusMap(item.trade_status) }}
          </p>
        </div>
        <div class="divider"></div>

        <div
          class="message mr-[10px] flex-1"
          :class="{ error: item.trade_status == '3' }"
        >
          {{ item.remark?.[locale] }}
        </div>
      </div>
    </div>
    <van-empty :description="t('common.noData')" />
  </div>
</template>

<script setup lang="ts">
import api from "@/api/api";
import { showToast } from "vant";
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();
import { useAutoRequest } from "@/hooks/loading";
const router = useRouter();
import dayjs from "dayjs";

// 基本数据
const records = ref([]);
const [loading, gameExchangeRecords] = useAutoRequest(api.gameExchangeRecords);

const getData = async () => {
  const res = await gameExchangeRecords({
    // 从路由参数中获取 package_name 和 device_id
    package_name: route.query.package_name,
    device_id: route.query.device_id,
  });
  records.value = res;
};

const route = useRoute();
watchEffect(() => {
  const package_name = route.query.package_name;
  const device_id = route.query.device_id;
  if (device_id && package_name) {
    getData();
  }
});

const trade_statusMap = (status: string) => {
  return t(`change.status.${status}`);
};
</script>

<style lang="scss" scoped>
.exchange-record {
  padding: 16px;
  background: #f5f5f5;
  min-height: 100vh;

  .record-item {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        display: flex;
        align-items: center;

        .logo {
          width: 24px;
          height: 24px;
          margin-right: 8px;
        }

        .brand {
          font-weight: 500;
        }
      }

      .date {
        color: #999;
      }
    }

    .content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 16px 0;

      .amount {
        font-size: 16px;
        font-weight: bold;
      }

      .points {
        display: flex;
        align-items: center;

        .coin-icon {
          width: 20px;
          height: 20px;
          margin-right: 4px;
        }
      }
    }

    .divider {
      height: 1px;
      background: #eee;
      margin: 12px 0;
    }
    // 待处理（Pending）[蓝色]，1：处理中（Processing）[黄色]，2：处理成功（Success）[绿色]，3：处理失败（Failure）[红色]，4：禁止提现（Disable）[红色
    .footer {
      .status-tag {
        border: 1px solid #333;
        width: auto;
        flex-shrink: 0;
        margin-left: auto;
        padding: 4px 12px;
        border-radius: 16px;
        font-size: 14px;
        margin-bottom: 8px;

        &.srtatus-0 {
          color: #3ea2ff;
          border: 1px solid #3ea2ff;
        }
        &.srtatus-1 {
          color: #ffa940;
          border: 1px solid #ffa940;
        }
        &.srtatus-2 {
          color: #1fa435;
          border: 1px solid #1fa435;
        }
        &.srtatus-3 {
          color: #ee2b2b;
          border: 1px solid #ee2b2b;
        }
      }

      .message {
        font-size: 14px;
        color: #666;

        &.error {
          color: #ee2b2b;
        }
      }
    }
  }
}
</style>
